<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100 NoIndent Flex FlexWrap">
            <div class="EmptyBox10"/>
            <div class="Container33 Responsive100 Flex FlexWrap">
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="icon-headset White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">SHARED MEDIA <br /> PER HOUR</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">87</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="icon-calendar White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">TOTAL REACH<br />PER WEEK</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">117</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
            </div>
            <div class="Container33 Responsive50 Flex FlexWrap">
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="icon-bell White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">ALERTS SENT <br /> PER HOUR</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">153</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="icon-broadcast White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">ALERTS SENT <br /> PER DAY</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">117</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
            </div>
            <div class="Container33 Responsive50 Flex FlexWrap">
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="fa fa-facebook-official White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">TOP LIKES<br />PER WEEK</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">2349</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
                <div class="Container100">
                    <div class="Container50 NoIndent">
                        <i class="fa fa-twitter White Opac70 Fs40 Fleft MarRight10 Fleft"/>
                        <span class="FontPoppinsRegular Fs14 White Opac50 DispInlBlock Fleft MarRight20" style="line-height:16px;">TOP TWEETS<br />PERSONAL</span>
                        <span class="FontPoppinsRegular Fs30 White Fleft DispInlBlock" style="line-height:30px;">27</span>
                    </div>
                    <div class="Container40 NoIndent">
                        <img src="#{resource['venture-layout:images/chart.svg']}" class="Wid100" />
                    </div>
                </div>
            </div>
        </div>


        <div class="Container100 NoIndent Flex FlexWrap">
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <img src="#{resource['venture-layout:images/chart-red.svg']}" class="Wid100" />
                    <div class="EmptyBox10"/>
                    <div class="FontPoppinsSemiBold Fs14 Leaden">GROWTH OF TOTAL USERS</div>
                    <div class="EmptyBox5"/>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Avg. Change Per Day <span class="FontPoppinsLight Orange Fright Fs18">-8.6 M</span></div>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Total Change Of Users <span class="FontPoppinsLight Orange Fright Fs18">-137 M</span></div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <img src="#{resource['venture-layout:images/chart-green.svg']}" class="Wid100" />
                    <div class="EmptyBox10"/>
                    <div class="FontPoppinsSemiBold Fs14 Leaden">NUMBER OF PAGE POSTS</div>
                    <div class="EmptyBox5"/>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Avg. Post Per Day <span class="FontPoppinsLight Green Fright Fs18">3.2 K</span></div>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Total Post Of Users <span class="FontPoppinsLight Green Fright Fs18">9.4 K</span></div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <img src="#{resource['venture-layout:images/chart-purple.svg']}" class="Wid100" />
                    <div class="EmptyBox10"/>
                    <div class="FontPoppinsSemiBold Fs14 Leaden">NUMBER OF INTERACTIONS</div>
                    <div class="EmptyBox5"/>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Avg. Interactions Per Day <span class="FontPoppinsLight Purple Fright Fs18">10.3 M</span></div>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Total Interactions Of Users <span class="FontPoppinsLight Purple Fright Fs18">310 M</span></div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <img src="#{resource['venture-layout:images/chart-yellow.svg']}" class="Wid100" />
                    <div class="EmptyBox10"/>
                    <div class="FontPoppinsSemiBold Fs14 Leaden">GROWTH OF TOTAL USERS</div>
                    <div class="EmptyBox5"/>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Avg. Change Per Day <span class="FontPoppinsLight Yellow Fright Fs18">-8.6 M</span></div>
                    <div class="FontPoppinsLight Fs14 Leaden DispBlock Wid100 OvHidden">Total Change Of Users <span class="FontPoppinsLight Yellow Fright Fs18">-137 M</span></div>
                </div>
            </div>
        </div>

        <div class="Container100 NoIndent Flex FlexWrap">
            <div class="Container60 Responsive50 Flex">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">ADD NEW INTERACTIONS</div>
                    <div class="EmptyBox10"/>
                    <p:tabView styleClass="OvHidden">
                        <p:tab title="SOCIAL">
                            <div class="Container40 Responsive100 NoIndent OvHidden ui-fluid">
                                <div class="Container40 Responsive50 FontPoppinsSemiBold Fs12 Black Opac80">Facebook</div>
                                <div class="Container60 Responsive50">
                                    <p:inputText placeholder="400"/>
                                </div>
                                <div class="Container40 Responsive50 FontPoppinsSemiBold Fs12 Black Opac80">Twitter</div>
                                <div class="Container60 Responsive50">
                                    <p:inputText placeholder="ASSY"/>
                                </div>
                                <div class="Container40 Responsive50 FontPoppinsSemiBold Fs12 Black Opac80">Instagram</div>
                                <div class="Container60 Responsive50">
                                    <p:inputText placeholder="3.000"/>
                                </div>
                                <div class="Container40 Responsive100 FontPoppinsSemiBold Fs12 Black Opac80">M. Hrs.</div>
                                <div class="Container30 Responsive100">
                                    <p:inputText placeholder="18"/>
                                </div>
                                <div class="Container30 Responsive100">
                                    <p:inputText placeholder="25"/>
                                </div>
                                <div class="Container40 Responsive100 FontPoppinsSemiBold Fs12 Black Opac80">Q. Hrs</div>
                                <div class="Container30 Responsive100">
                                    <p:inputText placeholder="22"/>
                                </div>
                                <div class="Container30 Responsive100">
                                    <p:inputText placeholder="38"/>
                                </div>
                                <div class="Container40 Responsive50 FontPoppinsSemiBold Fs12 Black Opac80">Pc Hr</div>
                                <div class="Container60 Responsive50">
                                    <p:calendar locale="en_US" pattern="MM/dd/yyyy" showOn="button"/>
                                </div>
                            </div>

                            <div class="Container60 Responsive100 NoIndent">
                                <div class="Container100 ui-fluid">
                                    <p:selectManyCheckbox layout="responsive" columns="3">
                                        <f:selectItem itemLabel="Facebook" itemValue="Facebook" />
                                        <f:selectItem itemLabel="Twitter" itemValue="Twitter" />
                                        <f:selectItem itemLabel="Instagram" itemValue="Instagram" />
                                        <f:selectItem itemLabel="Linkedin" itemValue="Linkedin" />
                                        <f:selectItem itemLabel="Snapchat" itemValue="Snapchat" />
                                        <f:selectItem itemLabel="Foursquare" itemValue="Foursquare" />
                                        <f:selectItem itemLabel="Twitch" itemValue="Twitch" />
                                        <f:selectItem itemLabel="WhatsApp" itemValue="WhatsApp" />
                                        <f:selectItem itemLabel="WeChat" itemValue="WeChat" />
                                    </p:selectManyCheckbox>
                                    <div class="EmptyBox20"/>
                                    <p:inputTextarea placeholder="Additional Info" cols="20" rows="7"/>
                                </div>

                                <div class="Container50 Responsive50 ui-fluid">
                                    <p:button value="Save" outcome="/dashboard-social.xhtml" styleClass="GreenButton"/>
                                </div>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <p:button value="Reset Form" outcome="/dashboard-social.xhtml" styleClass="RedButton"/>
                                </div>
                            </div>
                            <div class="EmptyBox10"/>
                        </p:tab>
                        <p:tab title="GROWTH"></p:tab>
                        <p:tab title="POSTS"></p:tab>
                        <p:tab title="PER CLICK"></p:tab>
                        <p:tab title="LIKES"></p:tab>
                        <p:tab title="TWEETS"></p:tab>
                        <p:tab title="MENTIONS"></p:tab>
                    </p:tabView>
                </div>
            </div>
            <div class="Container40 Responsive50 Flex">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">WEEKLY SOCIAL INTERACTIONS</div>
                    <div class="EmptyBox30"/>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">FACEBOOK</div>
                        <img src="#{resource['venture-layout:images/knob1.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">TWITTER</div>
                        <img src="#{resource['venture-layout:images/knob2.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">LINKEDIN</div>
                        <img src="#{resource['venture-layout:images/knob3.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">INSTAGRAM</div>
                        <img src="#{resource['venture-layout:images/knob4.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">SNAPCHAT</div>
                        <img src="#{resource['venture-layout:images/knob5.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">FOURSQUARE</div>
                        <img src="#{resource['venture-layout:images/knob6.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">TWITTER</div>
                        <img src="#{resource['venture-layout:images/knob2.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">LINKEDIN</div>
                        <img src="#{resource['venture-layout:images/knob3.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">INSTAGRAM</div>
                        <img src="#{resource['venture-layout:images/knob4.svg']}" class="Wid70" />
                    </div>
                    <div class="Container20 Responsive TexAlCenter">
                        <div class="FontPoppinsSemiBold Fs14 Leaden">FOURSQUARE</div>
                        <img src="#{resource['venture-layout:images/knob6.svg']}" class="Wid70" />
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>